<template>
  <div class="shopbag">
    
    <Back title="购物袋" :sticky="true">
      <template #back-right v-if="isLogin">
        <div @click="edit">{{isEdit ? '完成' : '编辑'}}</div>
      </template>
    </Back>

    <div v-if="isLogin">
      <div class="shopbag-box">
        <div class="shopbag-bg"></div>
        
        <div class="shopbag-list">
          <div class="s-item" v-for="item in shopbagData" :key="item.sid">
            <ShopbagItem :product="item" />
          </div>

        </div>

      </div>

      <div v-show="!isEdit">
      <van-submit-bar :price="3050" button-text="提交订单">
        <van-checkbox checked-color="#365DED" v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
      </div>

      <div v-show="isEdit" class="remove-select">
        <van-submit-bar button-text="删除选择" button-color="#ddd">
          <van-checkbox checked-color="#365DED" v-model="allChecked">全选</van-checkbox>
        </van-submit-bar>
      </div>

    </div>
    <div v-else>
      <van-empty image="error" description="请先登录">
        <van-button round color="#0C34BA" class="bottom-button" @click="goLogin">登录</van-button>
      </van-empty>
    </div>

  </div>
</template>

<script>
  import Back from '../components/Back.vue'
  import ShopbagItem from '../components/ShopbagItem.vue'
  export default {
    name: 'Shopbag',

    data() {
      return {
        //全选
        allChecked: true,

        isEdit: false,

        //用户是否登录
        isLogin: false,

        //购物袋数据
        shopbagData: []
      };
    },

    components: {
      Back,
      ShopbagItem
    },

    created() {
      this.getShopbagData();
    },

    methods: {
      edit() {
        this.isEdit = !this.isEdit;
      },

      //获取购物袋数据
      getShopbagData() {
        this.axios({
          method: 'get',
          url: '/findAllShopcart'
        }).then(res => {
          

          if (res.data.code !== 700) {
            this.isLogin = true;
          }

          if (res.data.code === 5000) {
            //添加单选属性
            res.data.result.forEach(v => {
              v.isCheck = false;
            })

            this.shopbagData = res.data.result;

                       }

        }).catch(err => {
                  })
      },

      //跳转到登录页面
      goLogin() {
        this.$router.push({name: 'Login'});
      }
    }
  }
</script>

<style lang="less" scoped>
/deep/ .van-submit-bar__bar{
  padding: 0 10px;
}
.bottom-button{
  width: 120px;
  height: 34px;
}
.remove-select{
  /deep/ .van-submit-bar__button--danger{
    margin-left: auto;
  
  }

  /deep/ .van-button__text{
    color: #444;
  }
}

.s-item{
  margin-bottom: 10px;
  &:last-child{
    margin-bottom: 0;
  }
}

  .shopbag-bg{
    height: 40px;
    background: url('../assets/shopbag_bg.png') no-repeat center center;
    background-size: cover;
  }

  /deep/ .van-submit-bar{
    bottom: 50px;
  }


</style>